<template>
  <!-- 托育客户档案 -->
  <div class="nurseryDetailPage">
    <CommonTitle titleName="托育客户信息">
      <template #rightCnBox>
        <div class="editBtnBox">
          <el-button
            v-if="state.editFlag"
            plain
            color="#FF7B50"
            :icon="Edit"
            @click="editClientFormBtn"
            >编辑</el-button
          >
          <el-button
            v-if="!state.editFlag"
            color="#F0F0F0"
            @click="editCancelBtn"
            >取消编辑</el-button
          >
          <el-button
            v-if="!state.editFlag"
            plain
            color="#FF7B50"
            :icon="Edit"
            @click="submitBtn"
            >保存</el-button
          >
        </div>
      </template>
    </CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="clientForm"
        class="demo-form-inline"
        label-position="right"
        label-width="110px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="幼儿姓名">
              <el-input
                :disabled="isDisabledForm"
                v-model="clientForm.customerName"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
            <el-form-item label="所属资产" label-width="220px">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.type"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在班级">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.className"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
            <el-form-item label="入园日期" label-width="220px">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.admissionTime"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="监护人联系电话">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.guardianPhone"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
            <el-form-item label="托育类型" label-width="220px">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.childcareType"
                placeholder="请输入"
                style="width: 348px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="托育周期">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.cycleDate"
                placeholder="期数"
                class="m-r5"
                style="width: 68px"
              />
              <el-date-picker
                  :disabled="isDisabledForm"
                v-model="clientForm.dateVal"
                type="daterange"
                range-separator="——"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="large"
                class="m-r5"
                style="width: 276px"
              />
              <el-button :disabled="isDisabledForm" plain color="#7A7FFF" @click="submitBtn"
                >明细</el-button
              >
            </el-form-item>
            <el-form-item label="交费总额" label-width="154px">
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.totalPay"
                placeholder="请输入"
                class="m-r5"
                style="width: 348px"
                type="number"
              />
              <el-button :disabled="isDisabledForm" plain color="#FF7B50" @click="submitBtn"
                >缴费记录</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="期间交易金额">
              <el-input
                :disabled="isDisabledForm"
                v-model="clientForm.dealTotalAmount"
                placeholder="请输入"
                class="m-r5"
                style="width: 96px"
                type="number"
              />
              <el-input
                  :disabled="isDisabledForm"
                v-model="clientForm.user"
                placeholder="请输入"
                style="width: 248px"
                type="number"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="考勤记录">
      <template #rightCnBox>
        <div class="periodRightBox">
          <div class="periodType">
            <el-select
              class="m-l20"
              style="width: 154px; margin-right: 28px"
              v-model="state.periodsVal"
              placeholder="请选择"
              @change="periodTypeChange"
            >
              <el-option
                v-for="item in state.periodsOptionArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              @click="exportExcel('period')"
              >导出考勤Excel</el-button
            >
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              style="margin-left: 16px"
              @click="importExcel('period')"
              >导入考勤Excel</el-button
            >
          </div>
          <div class="periodAmount">
            <span class="p-r10 m-r10 bd-r">应记满勤总天数：{{ periodAmount.requiredAttendanceDays }}天</span>
            <span class="p-r10 m-r10 bd-r">实际出勤总天数：{{ periodAmount.realCareDays }}天</span>
            <span class="p-r10 m-r10 bd-r">实际保教费计费总天数：{{ periodAmount.realCareDays }}天</span>
            <span>实际伙食费计费总天数：{{ periodAmount.realFoodDays }}天</span>
          </div>
        </div>
      </template>
    </CommonTitle>
    <el-table
      v-loading="periodTabel.loading"
      ref="periodRecordTable"
      :data="periodTabel.tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 32px"
    >
      <el-table-column
        prop="attendanceDate"
        label="出勤年月/日期"
        width="120"
        align="center"
      >
    </el-table-column>
      <el-table-column
        v-for="(n, i) in 31"
        :key="i"
        :prop="(i + 1)"
        :label="i + 1 + ''"
        align="center"
        width="50"
      >
        <template #default="scope">
          <img
            style="width: 16px; height: 16px"
            v-if="scope.row[(i + 1)] == 1"
            src="@/assets/iconImg/duigou.png"
            alt=""
          />
          <img
            style="width: 16px; height: 16px"
            v-else
            src="@/assets/iconImg/macha.png"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="realCareDays"
        label="实际满勤天数"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realCareDays"
        label="实际保教费计费天数"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realFoodDays"
        label="实际伙食费计费天数"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="特殊情况备注"
        width="110"
        align="center"
      ></el-table-column>
    </el-table>

    <CommonTitle titleName="收费明细">
      <template #rightCnBox>
        <div class="chargeRightBox">
          <div class="chargeType">
            <el-select
              class="m-l20"
              style="width: 154px; margin-right: 28px"
              v-model="state.ChargeVal"
              placeholder="请选择"
            >
              <el-option
                v-for="item in state.ChargeOptionsArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              @click="exportExcel('charge')"
              >导出考勤Excel</el-button
            >
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              style="margin-left: 16px"
              @click="importExcel('charge')"
              >导入考勤Excel</el-button
            >
          </div>
          <div class="chargeAmount">
            <span style="margin-right: 50px">应扣费总额: {{ chargeTabel.totalFee }}</span>
            <span>实际扣费总额: {{ chargeTabel.realTotalFee }}</span>
          </div>
        </div>
      </template>
    </CommonTitle>
    <el-table
      v-loading="chargeTabel.loading"
      ref="chargeDetailTable"
      :data="chargeTabel.tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 32px"
    >
      <el-table-column
        prop="chargeTime"
        label="出生年月/日期"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="standardCareFee"
        label="保税费标准(元/月)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="standardFoodFee"
        label="伙食费标准(元/月)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="requiredAttendanceDays"
        label="应计满勤天数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realCareDays"
        label="实际保教费计费天数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realFoodDays"
        label="实际伙食费计费天数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realCareFee"
        label="实际保育费(元)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realFoodFee"
        label="实际伙食费(元)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="beddingFee"
        label="床上用品费(元)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="realTotalFee"
        label="实际计费总额(元)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="特殊情况备注"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="paymentStatus"
        label="是否收到缴费单"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bankPaymentStatus"
        label="银行是否收到款项"
        align="center"
      ></el-table-column>
    </el-table>

    <CommonTitle titleName="延时服务记录">
      <template #rightCnBox>
        <div class="delayRightBox">
          <div class="chargStandBox">
            <span class="m-r10">延时服务计费标准</span>
            <span class="moneyBox dis-inlb">883.23 元/月</span>
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              @click="exportExcel('delay')"
              >导出考勤Excel</el-button
            >
            <el-button
              plain
              color="#FF7B50"
              :icon="Download"
              style="margin-left: 16px"
              @click="importExcel('delay')"
              >导入考勤Excel</el-button
            >

            <!-- <el-radio-group
              v-model="paymentPlan.paymentType"
              size="large"
              @change="paymentChange"
            >
              <el-radio-button :label="3">年付</el-radio-button>
              <el-radio-button :label="4">季付</el-radio-button>
              <el-radio-button :label="5">月付</el-radio-button>
            </el-radio-group> -->
          </div>
          <div class="delayAmount">
            <span class="p-r30">应收延时服务总费用：{{ delayAmount.delayTotalFee }}</span>
            <span>实收延时服务总费用：{{ delayAmount.realDelayTotalFee }}</span>
          </div>
        </div>
      </template>
    </CommonTitle>
    <el-table
      v-loading="delayTabel.loading"
      ref="delayTableRef"
      :data="delayTabel.tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 23px"
    >
      <el-table-column prop="index" label="序号" width="70" align="center">
      </el-table-column>
      <el-table-column
        prop="delayTime"
        label="延时托育服务日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="serviceFee"
        label="延时服务计费标准(元/次)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注说明"
        align="center"
      ></el-table-column>
      <el-table-column prop="name4" label="操作" width="80" align="center">
        <template #default="scope">
          <el-button
            color="#FF4D4F"
            style="color: #fff; width: 68px; height: 31px"
            type="primary"
            @click="deletBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { ref, reactive, onMounted } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { useRoute } from 'vue-router'
import  detailApi  from "@/api/nursery";
import {
  ElCol,
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElRadioGroup,
  ElRadioButton,
  ElDatePicker,
  ElSelect,
  ElOption,
} from "element-plus";
const route = useRoute()
const { id:customerId } = route.query

const isDisabledForm = ref(true);
const state = reactive({
  editFlag: true,
  periodsVal: "",
  periodsOptionArr: [
    // {
    //   value: "1",
    //   label: "第一期",
    // },
    // {
    //   value: "2",
    //   label: "第二期",
    // },
    // {
    //   value: "3",
    //   label: "第三期",
    // },
  ],
  ChargeVal: "",
  ChargeOptionsArr: [],
});

// 托育客户信息相关
const clientForm = reactive({
  customerName: "",
  type:"",
  className:"",
  admissionTime:"",
  guardianPhone:"",
  childcareType:"",
  cycleDate:"",
  dateVal:"",
  totalPay:"",
  dealTotalAmount:"",
  user: ""
});

const periodAmount = reactive({
  requiredAttendanceDays:0,
  realCareDays:0,
  realFoodDays:0
});


const editClientFormBtn = () => {
  isDisabledForm.value = false;
  state.editFlag = false;
};
const editCancelBtn = () => {
  isDisabledForm.value = true;
  state.editFlag = true;
};
const submitBtn = () => {
  isDisabledForm.value = true;
  state.editFlag = true;
};

// 考勤相关
const periodTypeChange = () => {};
const periodTabel = reactive({
  loading: false,
  tableData: [
    // {
    //   name1: "2022-10",
    //   name2: 0,
    //   name3: "1",
    //   name4: "0",
    //   name5: "1",
    //   name6: "0",
    //   name7: "0",
    //   name8: "1",
    //   name9: "0",
    //   name10: "1",
    //   name11: "0",
    //   name12: "0",
    //   name13: "1",
    //   name14: "0",
    //   name15: "0",
    //   name16: "1",
    //   name17: "0",
    //   name18: "1",
    //   name19: "1",
    //   name20: "0",
    //   name21: "1",
    //   name22: "1",
    //   name23: "1",
    //   name24: "1",
    //   name25: "0",
    //   name26: "1",
    //   name27: "1",
    //   name28: "0",
    //   name29: "0",
    //   name30: "1",
    //   name31: "1",
    //   name32: "0",
    //   name33: "56",
    //   name34: "56",
    //   name35: "31",
    //   name36: "36",
    // },
  ],
});

// 收费明细相关
const chargeTabel = reactive({
  loading: false,
  totalFee:0,
  realTotalFee:0,
  tableData: [
  ],
});

const paymentPlan = reactive({
  paymentType: 0,
});
// const paymentChange = (val) => {
//   console.log("选了季？？？？", val);
// };

const delayAmount = reactive({
  delayTotalFee:0,
  realDelayTotalFee:0
});

const delayTabel = reactive({
  loading: false,
  tableData: [
  ],
});

// 导入导出
const exportExcel = (type) => {};
const importExcel = (type) => {};

// 托育期数查询
const initPeriodsOption = () => {
  detailApi.getPeriodsOption(customerId).then((res)=>{
    const { code, data } = res
    if (code == 200) {
      var array = [];
      data.map((item)=>{
        array.push({
          value: item.periods,
          label: item.periods
        });
      });
      state.periodsOptionArr = array;
      state.periodsVal = data[0].periods;
      state.ChargeOptionsArr = array;
      state.ChargeVal = data[0].periods;

      initCustomerDetail();
      initAttendanceRecord();
      initChargeRecord();
      initDelayServiceRecord();
    }
  });
}

// 客户基础信息
const initCustomerDetail = () =>{
  detailApi.getCustomerDetail(customerId).then((res)=>{
    console.log(res)
    const { code, data } = res
    if (code == 200) {
      clientForm.customerName = data.customerName;
    //  clientForm.type = data.type;
      clientForm.className = data.className;
      clientForm.admissionTime = data.admissionTime;
      clientForm.guardianPhone = data.guardianPhone;
      clientForm.childcareType = data.childcareType;
      clientForm.cycleDate = data.cycleDate;
      clientForm.dateVal = data.dateVal;
      clientForm.totalPay = data.totalPay;
      clientForm.dealTotalAmount = data.dealTotalAmount;
      // clientForm.user: ""
      // console.log(data)
    }
  });
}

// 考勤查询
const initAttendanceRecord = ()=>{
  detailApi.getAttendanceRecord(customerId, state.ChargeVal).then((res)=>{
    const { code, data } = res
    if (code == 200) {
  //     periodAmount.requiredAttendanceDays = recordVo.requiredAttendanceDays;
       periodAmount.realCareDays = data.careTotalDays;
       periodAmount.realFoodDays = data.foodTotalDays;

    //   periodTabel.tableData = recordVo.attendanceRecord;
       data.recordVo.map((vo)=>{
        let record = vo.attendanceRecord;
        record.attendanceDate = vo.attendanceDate;
        record.realCareDays = vo.realCareDays;
        record.realFoodDays = vo.realFoodDays;
        record.remark = vo.remark;
        periodTabel.tableData.push(record);
       });
    }
  });
}

// 收费明细查询
const initChargeRecord = ()=>{
  detailApi.getChargeRecord(customerId, state.ChargeVal).then((res)=>{
    const { code, data } = res
    if (code == 200) {
      chargeTabel.tableData = data.recordVo;
      chargeTabel.totalFee = data.totalFee;
      chargeTabel.realTotalFee = data.realTotalFee;
    }
  });
}

// 托育延时服务查询接口
const initDelayServiceRecord = ()=>{
  detailApi.getDelayServiceRecord(customerId).then((res)=>{
    const { code, data } = res
    if (code == 200) {
      delayTabel.tableData = data.recordVo;
      delayAmount.delayTotalFee = data.delayTotalFee;
      delayAmount.realDelayTotalFee = data.realDelayTotalFee;
    }
  });
}

onMounted(() => {
  initPeriodsOption();
})

</script>

<style lang="scss" scoped>
.nurseryDetailPage {
  .editBtnBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .periodRightBox {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .periodAmount {
      // font-weight: 400;
      .bd-r {
        border-right: 1px solid #e3e7f1;
      }
    }
  }
  .chargeRightBox {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;;
    .chargeAmount {
      // font-weight: 400;
    }
  }
  .delayRightBox {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;;
    .chargStandBox {
      margin-left: 16px;
      display: flex;
      align-items: center;
      .moneyBox {
        width: 98px;
        height: 40px;
        margin-right: 30px;
        text-align: center;
        line-height: 40px;
        background: #fffbe5;
        border-radius: 20px;
        font-weight: 500;
        color: #ffbc00;
        border: 1px solid #ffbc00;
      }
    }
  }
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .el-input {
        width: 251px;
      }
      .el-form {
        .el-form-item {
          .el-form-item__label {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
